<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style></style>
  </head>
  <body>
    <script>
      // 一,什么是回流和重绘?
      // 01.回流:当一个或多个元素的大小或位置发生变化的时候就会触发回流,回流就是页面发生布局变化的时候,渲染引擎会根据每一个盒子的位置和大小重新布局页面
      // 02.重绘:当一些操作不会影响页面布局的时候,例如字体颜色,背景颜色等,就会触发重绘,重绘就是页面布局完毕后渲染引擎开始给每一个元素添加相应的样式
      // 总结:页面刚加载的时候一定会触发回流,回流必会触发重绘,而重绘不一定会触发回流

      // 二,怎么样减少重绘和回流
      // 01.避免频繁操作DOM
      // 02.避免修改css样式的时候一个一个的修改,最好能一次性修改完成
      // 03.把display:none;替换成visibility: inherit;
    </script>
  </body>
</html>
